🎨 Waterfall Methodology · Lesson 3

📐 Phase 2: System Design, UX, and Diagrams

The Goal of the Design Phase

Once requirements are gathered and approved, the System Design phase begins. This is where the look, content, and functionality of the system are planned. The types of design documents required will vary based on the project; for example, designing a new customer-facing e-commerce website will involve different planning than installing hardware and preinstalled software. At its core, this phase bridges the gap between understanding what the system should do, and planning how it will do it.

UX vs. UI: The Dynamic Duo

User experience (UX) design should be considered alongside user interface (UI) design, but it is important to know that they aim to achieve slightly different things.

🧑‍💻 User Interface (UI) Design

Focuses on the look and style of the system and the way in which the humans and computers interact with each other.

🧠 User Experience (UX) Design

Aims to ensure that the system provides meaningful and enjoyable experiences for users. It ensures that the look and functionality are supported by usability and accessibility considerations for user satisfaction.

In addition to the research carried out in the requirements gathering stage, UX design makes use of key documents such as User Personas (fictional representations of typical users based on research data) and Information Architecture (IA) (organizing and structuring content to aid intuitive navigation and efficient access to information).

❓ Question 1 — What is the primary focus of User Experience (UX) Design?

A) Creating visually appealing color schemes and typography. B) Ensuring the system provides meaningful, enjoyable, and usable experiences. C) Writing the code for the backend database. D) Installing the hardware and network infrastructure.

Why B is correct: The text states: "UX design is an area of the design phase that focuses on ensuring products and systems provide meaningful and enjoyable experiences for users." While visual appeal (Option A) is important, it falls under UI design. UX is about the holistic feel, usability, and accessibility of the product.

From Ideas to Interfaces

Once the UX and UI goals are set, the team uses specific design tools to translate requirements into visual plans:

Wireframing and Prototyping: Low-fidelity versions of the interface that bridge the gap between UX and full UI designs. They illustrate the layout and structure without specific colors or fonts, allowing designers to explore different solutions and gather feedback early before final implementation.
Visual Design: Focuses on the aesthetics, including colors, typography, imagery, and final layout. It aims to create cohesive, visually appealing designs that communicate brand identity and evoke emotional responses.
Accessibility: Ensures products can be used by people of all abilities. This involves designing inclusive or alternative interfaces and adhering to standards like the Web Content Accessibility Guidelines (WCAG) set by the World Wide Web Consortium (W3C), which is the 'go to' standard for most computer systems.

❓ Question 2 — A designer creates a basic sketch of a website's layout (showing where buttons and images will be) using only greyscale boxes, without any colors or specific text. This is an example of:

A) Information Architecture B) Wireframing and Prototyping C) Visual Design D) Maintenance Planning

Why B is correct: The text defines wireframes as "low-fidelity versions of a user interface... These designs illustrate the layout, structure and functionality... but without the specific colours, fonts, images and so on that will be found in the final product." Information Architecture is about organizing content, and Visual Design is specifically about colors, typography, and final aesthetics.

Planning Logic and Data Flow

Beyond the visual interface, System Design also relies on technical diagrams to plan how the system will function:

📊 Flowcharts are used to plan the data flow and logic of a computer system. They represent an overview of a system or a specific part of an algorithm. Flowcharts can be used to:

Document existing processes (capturing steps for easier analysis).
Communicate complex processes visually to diverse audiences (including senior management).
Plan algorithms in software development.
Map user journeys in UX/UI design to avoid bottlenecks and pain points.

🔄 Information Flow Diagrams (IFDs) are visual representations that show how information moves within and between systems or organizations. They help to understand the sources, destinations, and pathways of information, as well as any transformations or processing that occurs along the way.

❓ Question 3 — Which diagramming tool is specifically used to show how information moves between different systems or organizations, highlighting pathways and transformations?

A) An Information Flow Diagram (IFD) B) A Wireframe C) A User Persona D) A Hardware Layout Plan

Why A is correct: The text explicitly states: "An information flow diagram (IFD) is a visual representation that shows how information moves within and between systems or organisations. It helps to understand the sources, destinations and pathways of information, as well as any transformations or processing that occurs along the way." Wireframes are for UI structure, Personas are for user profiles, and Hardware layout is for physical infrastructure.

🎉 You've mastered the System Design Phase!

Recap:
• UX vs UI: UX focuses on the holistic experience and usability; UI focuses on the look, style, and interaction.
• Design Artifacts: Personas, IA, Wireframes, Prototypes, and Visual Design help plan the interface.
• Accessibility: Must meet standards like WCAG to be usable by all abilities.
• Diagrams: Flowcharts map logic/processes, while IFDs map how data moves between systems.

Ready to move on to Phase 3: Implementation & Testing?